<template>
  <div class="addOrEdit">
    <el-dialog
      :before-close="handClose"
      center
      width="30%"
      :title="title"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓位" prop="shPosition">
              <el-input v-model.number="ruleForm.shPosition"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库地址:" prop="shAddress">
              <el-input v-model.trim="ruleForm.shAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库类型" prop="shTypeId">
               <el-cascader
                :show-all-levels="false"
                :clearable="true"
                :props="{children: 'list',label: 'typeName',value: 'shTypeId',checkStrictly: true}"
                v-model="ruleForm.shTypeId"
                :options="options"
                @expand-change="handleChange"
                >
            </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input v-model.trim="ruleForm.notes"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { warehouseType, addWarehouse } from "@/api/jxc/warehouse.js";
export default {
  name: "addOrEdit",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        warehouseType().then(
            res => {
                console.log("仓库类型级联res", res);
                this.options = res.data;
            },
            err => {}
        );
        if (this.title == "修改供应商") {
            this.ruleForm = this.rowData;
            this.ruleForm.imageUrl = this.rowData.businessLicence;
        }
      }
    }
  },
  data() {
    return {
      options: [],
      retainTime: [
        { label: "30分钟", value: "30分钟" },
        { label: "一天", value: "1天" },
        { label: "二天", value: "2天" }
      ],
      rules: {
        notes: [
          { required: true, message: "仓位不能为空", trigger: "blur" },
        ],
        shAddress: [
          { required: true, message: "地址不能为空", trigger: "change" }
        ],
      },
      ruleForm: {
        notes: "",
        shAddress: "",
        shPosition: "",
        shStatus: "",
        shTypeId: []
      }
    };
  },
  methods: {
    handleChange(row){
        console.log("row", row);
        this.ruleForm.shTypeId = row[row.length-1];
    },
    handClose() {
      this.$emit("update:off", false);
      console.log(this.$refs.ruleForm);
      this.ruleForm.imageUrl = "";
      this.$refs.ruleForm.resetFields();
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          if (this.title == "新增仓库") {
            addWarehouse(this.ruleForm).then(
              res => {
                console.log("res新增仓库成功", res);
                this.$message({
                  type: "success",
                  message: "新增仓库成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {}
            );
          }else{
              delete this.ruleForm.imageUrl;
              editSupplier(this.ruleForm).then(
              res => {
                console.log("res修改供应商成功", res);
                this.$message({
                  type: "success",
                  message: "修改供应商成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {
                  this.$notify({
                      type: "error",
                      message: err.message
                  });
              }
            );
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-upload--picture-card {
  width: 70px;
  height: 70px;
  border: none;
}
</style>